import React, { useState } from "react";
import { Card, Empty, Spin, message } from 'antd';
import '../index.less'
type Props = {
    holidayList: any, setHolidayDate: any;
    loading: any;
}

export default function HolidayList(props: Props) {
    const { holidayList, setHolidayDate, loading } = props;
    const cardClick = (item: any) => {
        setHolidayDate(item?.date);
        message.success(`已选择${item.name}`)
    }
    return (
        <div >
            {holidayList?.length > 0 ? holidayList?.map((item) => {
                return (
                    <Card
                        title={item?.name}
                        style={{ margin: "8px 0", cursor: "pointer" }}
                        onClick={() => cardClick(item)}
                        key={item?.name}
                    >
                        <div>
                            <span>desc：</span>
                            <span>{item?.description || 'none'}</span>
                        </div>
                        <div>
                            <span>date：</span>
                            <span>{item?.date}</span>
                        </div>
                    </Card>
                );
            }) : <div style={{ position: 'absolute', top: '50%', left: 'calc(50% - 85px)' }}> <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description='暂无数据，请先选择国家' /></div>}
            {
                loading && <div className="example">
                    <Spin />
                </div>
            }
        </div>
    )
}